<template>
	<view class="container">
		<view class="article-header">
			<text class="title">{{articleData.title}}</text>
			<view class="meta">
				<text class="author">作者: {{articleData.author}}</text>
				<text class="visit">浏览: {{articleData.visit}}</text>
			</view>
		</view>		
		<view class="image-list">
			<image v-for="(item, index) in articleData.pic" :key="index" 
			:src="item.url"
			 mode="widthFix"
			class="article-image"></image>
		</view>
	
		<view class="content">
			<rich-text :nodes="articleData.editor"></rich-text>
		</view>

		<view v-if="articleData.url" class="source">
			<text>标签：</text>
			<text class="url">{{articleData.checkbox}}</text>
		</view>
	</view>
</template>

<script>
import { ref,reactive,onMounted,getCurrentInstance } from 'vue'
import { onLoad }  from "@dcloudio/uni-app"
import uinFun from '@/uilt/uinFun'
import { getDemoArticle } from '@/apis/api'

export default {
	setup() {
		// 文章数据对象，包含标题、作者、图片、内容等信息
		const articleData = reactive({})
		// 获取页面参数
		const options = reactive({})
		onLoad((get) => {
			Object.assign(options,{id:get.id})
		})
		// 加载数据方法
		const loadData = () => {		
			getDemoArticle(options).then(res => {
				// (1)判断是否请求成功
				if (res.code !== 200) {
					uinFun.setModal('错误提示', res.data)
					return false
				}
				// (2)赋值
				Object.assign(articleData, res.data)
				articleData.pic= JSON.parse(res.data.pic)
			}).catch(err => {
				uinFun.setModal('错误提示', err)
			})
		}
			
		// 页面加载时调用加载数据方法
		onMounted(()=>{
			loadData()
		})
		return {
			articleData,
			loadData,
		}
	},

	onLoad(option) {
		uinFun.setBarTitle('内容详情')
	}
}
</script>

<style>
.container {
	padding: 20px;
}
.article-header {
	margin-bottom: 20px;
}
.title {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
}
.meta {
	font-size: 14px;
	color: #666;
	display: flex;
	justify-content: space-between;
}
.article-image {
	width: 100%;
	margin: 20px 0;
}
.content {
	line-height: 1.8;
	font-size: 16px;
}
.source {
	margin-top: 30px;
	font-size: 14px;
	color: #666;
}
.url {
	color: #007AFF;
	text-decoration: underline;
}
</style>
